<template>
	<div class="wrap">
		<div class="box mt-2">
			<div class="title">
				<svg-icon name="logo" color="#f60" class="logo" />供应商注册
			</div>
			<a-form ref="formRef" :model="formState" :rules="formRules" v-bind="{ labelCol: { style: { width: '100px' } } }" @finish="saveUser">
				<table cellspacing="0" cellpadding="0" style="width: 100%;">
					<tr>
						<td style="font-size:14px;font-weight:bold;text-align:center" colspan="3">
							<div style="margin-bottom: 10px;">基本信息</div>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							<a-form-item label="公司名称" name="company_name">
								<a-input v-model:value="formState.company_name" />
							</a-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<a-form-item label="供应商类别" name="supplier_type">
								<a-select v-model:value="formState.supplier_type" mode="multiple" :options="supplierTypeOptions" option-filter-prop="label"></a-select>
							</a-form-item>
						</td>
						<td>
							<a-form-item label="公司性质" name="company_type">
								<a-select v-model:value="formState.company_type" :options="companyTypeOptions" option-filter-prop="label"></a-select>
							</a-form-item>
						</td>
						<td>
							<a-form-item label="专业" name="major">
								<a-select v-model:value="formState.major" mode="multiple" :options="majorOptions" option-filter-prop="label"></a-select>
							</a-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<a-form-item label="是否是委托人" name="is_consignor">
								<a-switch v-model:checked="formState.is_consignor" :checked-value="1" :un-checked-value="0" disabled />
							</a-form-item>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							<a-form-item label="经营范围" name="supplier_business_scope">
								<a-textarea v-model:value="formState.supplier_business_scope" placeholder="请输入经营范围" />
							</a-form-item>
						</td>
					</tr>
					<tr>
						<td style="font-size:14px;font-weight:bold;text-align:center" colspan="3">
							<div style="margin-bottom: 10px;">联系信息</div>
						</td>
					</tr>
					<tr>
						<td>
							<a-form-item label="法定代表人" name="legal_person">
								<a-input v-model:value="formState.legal_person" />
							</a-form-item>
						</td>
						<!--						<td>-->
						<!--							<a-form-item label="法人身份证号" name="legal_person_idcard">-->
						<!--								<a-input v-model:value="formState.legal_person_idcard" />-->
						<!--							</a-form-item>-->
						<!--						</td>-->
						<td>
							<a-form-item label="联系方式" name="contacts_tel">
								<a-input v-model:value="formState.contacts_tel" />
							</a-form-item>
						</td>
					</tr>
					<tr>
						<td style="font-size:14px;font-weight:bold;text-align:center" colspan="3">
							<div style="margin-bottom: 10px;">登录信息</div>
						</td>
					</tr>
					<tr>
						<td>
							<a-form-item label="登录手机号" name="mobile">
								<a-input v-model:value="formState.mobile" />
							</a-form-item>
						</td>
						<td colspan="2">
							<a-form-item label="验证码" name="sms_code">
								<a-input-group compact>
									<a-input v-model:value="formState.sms_code" :maxlength="4" style="width: calc(100% - 100px)" />
									<a-button v-if="smsOpt.smsTime > 0" type="primary" :disabled="true" style="width:100px">{{ smsOpt.smsTime }}s重新发送</a-button>
									<a-button v-else type="primary" :disabled="!/^[1][3-9][0-9]{9}$/.test(formState.mobile)" style="width:100px" @click="getSmsCode">{{ !smsTicket ? '发送验证码' : '重新发送' }}</a-button>
								</a-input-group>
							</a-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<a-form-item label="登录密码" name="password">
								<a-input-password v-model:value="formState.password" autocomplete="off" />
							</a-form-item>
						</td>
						<td colspan="2">
							<a-form-item label="重复密码" name="confirm_password">
								<a-input-password v-model:value="formState.confirm_password" autocomplete="off" />
							</a-form-item>
						</td>
					</tr>
					<tr>
						<td style="font-size:14px;font-weight:bold;text-align:center" colspan="3">
							<div style="margin-bottom: 10px;">开票信息</div>
						</td>
					</tr>
					<tr>
						<td>
							<a-form-item label="户名" name="company_name">
								<a-input v-model:value="formState.company_name" />
							</a-form-item>
						</td>
						<td>
							<a-form-item label="社会信用代码" name="company_code">
								<a-input v-model:value="formState.company_code" />
							</a-form-item>
						</td>
						<td>
							<a-form-item label="地址" name="company_address">
								<a-input v-model:value="formState.company_address" />
							</a-form-item>
						</td>
					</tr>
					<tr>
						<td>
							<a-form-item label="电话" name="company_phone">
								<a-input v-model:value="formState.company_phone" />
							</a-form-item>
						</td>
						<td>
							<a-form-item label="开户行" name="account_bank">
								<a-input v-model:value="formState.account_bank" />
							</a-form-item>
						</td>
						<td>
							<a-form-item label="银行账号" name="company_account">
								<a-input v-model:value="formState.company_account" />
							</a-form-item>
						</td>
					</tr>
				</table>
				<a-row :gutter="20">
					<a-col :span="24" class="py-4 text-center">
						<a-space>
							<a-button class="cache-btn" @click="handleCache">
								<DeliveredProcedureOutlined />暂存
							</a-button>

							<a-button type="primary" html-type="submit">
								<save-outlined />提交
							</a-button>

							<a-button @click="router.push(`login`);">返回</a-button>
						</a-space>
					</a-col>
				</a-row>
			</a-form>
		</div>
	</div>
</template>
<script setup>
import { computed, defineComponent, getCurrentInstance, inject, onMounted, ref } from "vue";
import { CloseOutlined, DeliveredProcedureOutlined, ImportOutlined, LoadingOutlined, SaveOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
import { post } from "@/utils/index.js";
import { useRouter } from "vue-router";
const formState = ref({
	is_consignor: 1
});
const { proxy } = getCurrentInstance();
const formRef = ref();
const router = useRouter();
const smsOpt = ref({
	smsTime: 0
});
const formRules = computed(() => {
	//const { password } = formState.value;

	return {
		legal_person: [{ required: true, message: "请输入法定代表人", trigger: "blur" }],
		legal_person_idcard: [
			{ required: true, message: "请输入法人身份证号", trigger: "blur" },
			{ pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: "请输入正确格式法人身份证号", trigger: "blur" }
		],
		company_code: [{ required: true, message: "请输入社会信用代码", trigger: "blur" }],
		company_account: [{ required: true, message: "请输入开户行", trigger: "blur" }],
		account_bank: [{ required: true, message: "请输入账户", trigger: "blur" }],
		company_name: [{ required: true, message: "请输入供应商", trigger: "blur" }],
		supplier_type: [{ required: true, message: "请选择供应商类别", trigger: "blur" }],
		company_type: [{ required: true, message: "请选择公司性质", trigger: "blur" }],
		major: [{ required: true, message: "请选择专业", trigger: "blur" }],
		username: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
		mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
		password: [{ required: true, message: "请输入密码", trigger: "blur" }],
		sms_code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
		contacts: [{ required: true, message: "请输入联系人", trigger: "blur" }],
		client: [{ required: true, message: "请输入委托人", trigger: "blur" }],
		supplier_business_scope: [{ required: true, message: "请输入经营范围", trigger: "blur" }],
		//password: [{ required: true, message: "请输入密码", trigger: "blur" }],
		/**confirm_password: [{
     required: true,
     trigger: "blur",
     validator: (rule, value) => {
     if (!value !== !password) return Promise.reject("确认密码不一致");

     return Promise.resolve();
     }
     }]**/
	};
});
const supplierTypeOptions = [
	{
		value: 1,
		label: "生产制造单位"
	},
	{
		value: 2,
		label: "贸易单位"
	},
	{
		value: 3,
		label: "代理经销"
	},
	{
		value: 4,
		label: "服务提供"
	}
];
const companyTypeOptions = [
	{
		value: 1,
		label: "有限公司"
	},
	{
		value: 2,
		label: "股份公司"
	},
	{
		value: 3,
		label: "央企"
	},
	{
		value: 4,
		label: "国企"
	},
	{
		value: 5,
		label: "国资委"
	}
];
const majorOptions = [
	{
		value: 1,
		label: "劳务作业"
	},
	{
		value: 2,
		label: "专业作业"
	},
	{
		value: 3,
		label: "材料供应"
	},
	{
		value: 4,
		label: "机械租赁"
	},
	{
		value: 5,
		label: "服务提供"
	},
	{
		value: 6,
		label: "回收处理"
	}
];
onMounted(async () => {
	const cacheData = localStorage.getItem("signCompany-save");
	formState.value = JSON.parse(cacheData) || formState.value;
});

const handleCache = () => {
	localStorage.setItem("signCompany-save", JSON.stringify(formState.value));
	proxy.$message.success("缓存成功");
};
const saveUser = () => {
	formRef.value
		.validate()
		.then(() => {
			proxy.$message.destroy();

			const params = { ...formState.value };
			params.status = -1;
			if (!smsOpt.value.smsTicket) {
				proxy.$message.error("请先获取验证码", 1);
				return;
			}

			if (params.birthday) params.birthday = params.birthday.format("YYYY-MM-DD");
			params.username = params.mobile;
			params.department_ids = params.department_ids?.join(",");
			params.supplier_type = params.supplier_type?.join(",");
			params.major = params.major?.join(",");
			params.is_supplier = 1;
			params.sms_ticket = smsOpt.value.smsTicket;
			params.reset_password = 0;
			if (params.is_consignor) {
				params.fullname = params.legal_person;
			}

			post("/sign/user/save", params)
				.then(() => {
					proxy.$message.success("注册成功", 1);
					localStorage.removeItem("signCompany-save");
					proxy.$message.loading("登录中");
					post("login", { username: params.username, password: params.password })
						.then(data => {
							const { token } = data;
							proxy.$cookies.set("token", token);
							proxy.$cookies.remove("_tab_panes");
							proxy.$message.destroy();
							proxy.$message.success("登录成功", 1);
							window.location.href = "/";
						})
						.catch(err => {
							proxy.$message.error(err);
						});
				})
				.catch(err => {
					proxy.$message.error(err);
				});
		})
		.catch(err => {});
};
const countdown = () => {
	const t = setInterval(() => {
		if (smsOpt.value.smsTime === 0) clearInterval(t);

		smsOpt.value.smsTime--;
	}, 1000);
};
const getSmsCode = () => {
	const { mobile } = formState.value;
	post("sign/mobile/code", { mobile })
		.then(({ ticket }) => {
			smsOpt.value.smsTicket = ticket;
			smsOpt.value.smsTime = 60;
			countdown();
		})
		.catch(err => {
			proxy.$message.error(err);
		});
};
const closeTab = inject("closeTab");
</script>
<style scoped lang="scss">
.wrap {
	height: 100vh;
	background: url("../assets/login-bg.png") no-repeat calc(50% + 360px) calc(50% - 100px);
	background-size: auto 600px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.box {
	width: 800px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.8);
	padding: 32px;
	border-radius: 8px;
	box-shadow: 0 6px 50px rgba(41, 59, 125, 0.13);

	position: relative;
	margin-top: -150px;
	.title {
		display: flex;
		align-items: center;
		font-size: 20px;
		font-weight: 800;
		margin-bottom: 20px;
		padding: 10px 0 25px;
		justify-content: center;

		.logo {
			width: 48px;
			height: 48px;

			margin-right: 8px;
		}
	}
}
</style>